<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云端就业工作室</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style_top.css">
    <link rel="stylesheet" href="css/style_nav.css">
    <link rel="stylesheet" href="css/style_about.css">
    <link rel="stylesheet" href="css/style_news.css">
    <link rel="stylesheet" href="css/style_mien.css">
    <link type="text/css" href="css/zw.css" rel="stylesheet"/>

    <style>
        [v-clock]{
            display: none;
        }
    </style>

    <script type="text/javascript">
        //设置定时器
        var count = 0;    //在调用函数的时候0.jpg已经显示，如果num=0，那么在执行下面函数时，0.jpg会再次显示2秒
        //设置定时器
        window.setInterval("changeImage()", 5000);

        //设置寻找图片的函数
        function changeImage() {
            var img = document.getElementById("img");//img对象就相当于img标签
            //我自己在网上找的5张图。。。
            if (count < 3) {
                img.src = "img/" + count + ".jpg";
                count++;
            } else {
                count = 1;
                changeImage();
            }
        }

        function goBottom() {/* 向下跳转*/
            window.scrollTo(0, document.documentElement.scrollHeight-document.documentElement.clientHeight);
        }
    </script>
</head>

<body>
<div class="all">
    <div class="top">
        <!--导航栏-->
        <div class="top_bar">
            <span><img src="img/LOGO2.png" width="240" height="60" alt="云端工作室"></span>
            <ul class="nav">
                <li><a class="on" href="#" style="color: #67b803">首　页</a></li>
                <li><a href="gzsbk.html">工作室板块</a></li>
                <li><a href="news.html">新闻中心</a></li>
                <li><a href="human_resources.html">人力资源</a></li>
                <li><a href="study.html">学习板块</a></li>
                <li><a href="javascript:void(0)" onclick="goBottom()">联系我们</a></li>
            </ul>
        </div>
        <!--轮播图-->
        <div class="top_car">
            <span><img src="img/0.jpg" id="img" width="964px" height="470px"/></span>
        </div>
    </div>
    <br>
    <br>
    <!--关于-->
    <div id="class1">
        <h1>关于我们</h1>

    </div>
    <div class="class2">
        <div id="scrollBox">
            <ul id="con1">
                <li>云端就业工作室于2016年11月30日成立</li>
                <li>是由南昌工程学院招生就业处</li>
                <li>联合南昌云端网络科技有限公司</li>
                <li>组建的校园互联网+就业大学生就业实践平台，</li>
                <li>旨在为在校学生打造一个学习、创新</li>
                <li>以及应用互联网技术提升自我的空间。</li>
                <br>
            </ul>
            <ul id="con2"></ul>
        </div>
<!--        <div style="font-size: 18px;color:black">-->
<!--            云端就业工作室于2016年11月30日成立，是由南昌工程学院招生就业处联合南昌云端网络科技有限公司组建的校园互联网+就业大学生就业实践平台，旨在为在校学生打造一个学习、创新以及应用互联网技术提升自我的空间。<br><br><br>-->
<!--        </div>-->
        <div class="square1" style="float: left">
            <a href="competition.html"  style="text-decoration: none">
                <img src="img/项目服务.jpg" alt=" " width="90" height="90" style="text-align: center"/>
                <br><br><br><br>比赛项目
            </a>
        </div>
        <div class="square1" style="float:left">
            <a href="gzsbk.html"
                style="text-decoration: none"><img src="img/互联网板块.jpg" alt=" " width="90" height="90"
                                                                  style="text-align: center"/><br><br><br><br>
                互联网板块</a>
        </div>
        <div class="square1" style="float: left">
            <a href="gzsbk.html"  style="text-decoration: none"><img src="img/自媒体运营.jpg" alt=" " width="90" height="90" style="text-align: center"/>
                <br><br><br><br>
                自媒体板块</a>
        </div>
    </div>
    <br>
    <br>
    <br>
    <!--新闻中心-->
    <div class="news_top">
        <h1>新闻中心</h1>
    </div>
    <div id="news" v-clock>
        <div class="news_list" v-for="item in newsList" :key="item.id">
            <div class="date">
                <h1>{{item.createTime.substring(0,4)}}</h1>
                <h2>{{item.createTime.substring(5,10)}}</h2>
            </div>
            <span>
                <a href="news_detail.html" :title="item.title">
                    <img :src="item.picture" width="180" height="120" :alt="item.title" class="dh"></a>
            </span>
            <ul>
                <li><a href="news_detail.html" :title="item.title"><h3 style="white-space:nowrap;overflow: hidden;text-overflow:ellipsis;padding-bottom: 10px">
                    {{item.title}}</h3></a></li>
                <li  style="overflow: hidden;text-overflow:ellipsis;">{{item.context}}</li>
            </ul>
        </div>
        <div class="view-all-news">
            <div class="view-font">
                <a href="news.html" target="_blank" style="text-decoration: none">查看全部</a>
            </div>
            <a href="news.html" style="text-decoration: none"><img src="img/right_arrow.png" alt="" width="35" height="35"></a>
        </div>
    </div>
    <br><br><br>
    <!--动态视频-->
    <div class="one_photo">
        <video id="video_back" src="video/xuanku01.mp4" width="1905px" height="450px" loop autoplay></video>
        <p class="text">云端就业工作室</p>
    </div>
    <!--工作室风采-->
    <div class="mien_title">
        <h1>工作室风采</h1><br>
    </div>
    <div class="wrap" id="wrap">
        <ul class="content"></ul>
        <a href="javascript:;" class="prev">&#60;</a>
        <a href="javascript:;" class="next">&#62;</a>
    </div>
    <!--置顶按钮-->
    <div class="bottom-bar-item" style="float:right;">
        <a href="#"><img src="img/up_arrow1.png" alt="" style="padding: 7px;"></a>
    </div>
    <!--联系我们-->
    <div class="blackscreen1">
        <div class="blackscreen2">
            <ul class="item2" style="padding-left: 100px;">
                <a class="bottom_title" style="font-size: 23px;padding-right:20px;color: #FFFFFF;"><br>上级部门</a><br>
                <a href="http://www.gogotoo.net/" target="_blank">云端科技有限公司</a><br>
                <a>招生就业处</a>
            </ul>
            <ul class="item1">
                <a class="bottom_title" style="font-size: 23px;color: #FFFFFF;padding-left: 70px;"><br>关于</a><br>
                <a href="study.html">学习板块</a><br>
                <a href="competition.html">比赛项目</a><br>
                <a href="news.html">新闻中心</a><br>
                <a href="human_resources.html">人力资源</a><br>
            </ul>
            <div style="float: left;padding-top:75px">
                <img src="img/LOGO2.png" style="width: 360px;height: 100px;padding-right: 0px">
            </div>
            <ul class="item3" style="padding-left: 65px">
                <a class="bottom_title" style="font-size: 23px;color: #FFFFFF;"><br>联系我们</a><br>
                <a>QQ:1352834940</a><br>
                <a>邮箱:1352834940@qq.com</a><br>
                <a>微信:hy15180043828</a><br>
                <a>电话:15180043828</a><br>
            </ul>
            <ul class="item4" style="padding-left: 60px">
                <a class="bottom_title" style="font-size: 23px;color: #FFFFFF;"><br>友好社团</a><br>
                <a>爱心公益协会</a><br>
                <a>鸣鹿工作室</a><br>
                <a>巅峰之家</a><br>
                <a>南昌工程学院军官教导团</a><br>
            </ul>
        </div>
    </div>
</div>

<script src="js/srollbox.js"></script>
</body>
<script>
    onload = function () {
        var btns = document.getElementsByClassName('btn'),
            imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');

        var index = 2,
            front = 0,
            back = 0,
            offset = false,
            timer = setInterval(timer, 2000);


        for (var i = 0; i < btns.length; i++) {
            (function (i) {
                btns[i].onclick = function () {
                    click(i)
                };
            })(i);

            btns[i].onmouseover = function () {
                offset = true;
            }
            btns[i].onmouseout = function () {
                offset = false;
            }
        }

        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onmouseover = function () {
                offset = true;
            }
            imgs[i].onmouseout = function () {
                offset = false;
            }
        }

        function timer() {
            console.log(offset)
            if (offset) {
                return;
            } else {
                click(1)
            }
        }

        function click(x) {
            imgs[index].setAttribute('class', '');
            if (x === 0) {
                if (--index < 0) {
                    index = --imgs.length;
                }
                front = back = index;
                if (++front > --imgs.length) {
                    front = 0
                }
                if (--back < 0) {
                    back = --imgs.length
                }
                imgs[front].style.zIndex = '1';
                imgs[back].style.zIndex = '0';
            } else {
                if (++index > --imgs.length) {
                    index = 0;
                }
                front = back = index;
                if (++front > --imgs.length) {
                    front = 0
                }
                if (--back < 0) {
                    back = --imgs.length
                }
                imgs[front].style.zIndex = '0';
                imgs[back].style.zIndex = '1';
            }
            imgs[index].style.zIndex = '10';
            imgs[front].setAttribute('class', 'front')
            imgs[back].setAttribute('class', 'back')
            imgs[index].setAttribute('class', 'active');
        }
    }
</script>
<script type="text/javascript" src="js/tools.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
<!--<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>-->
<script>
    const news = new Vue({
        el:"#news",
        data:{
            newsList:[],
        },
        methods: {},
        // methods:{
        //     getData:function () {
        //         var that = this;
        //         that.$http({
        //             method:"get",
        //             url:"",
        //             headers:{},
        //         }).then((res) => {
        //             console.log(res);
        //             that.newsList = res.data;
        //         }).catch(e=>{
        //             console.log(e);
        //         })
        //     }
        // },
        created:function() {
            var that = this;
            axios.get("/IndexNews").then(res => {
                // console.log(res.data);
                that.newsList = res.data.data;
            }).catch(e => {
                console.log(e);
            })
        }
    });
</script>
<script type="text/javascript" src="js/js.js"></script>
</html>